<template>
  <div class="box">
    <div class="content">
      <!-- <div class="title">
        请将物品放置在指定货位上,系统自动检测(非设备物品请手动输入归还数量)
      </div> -->
      <div class="title">
        <div>
          <i
            class="el-icon-warning"
            style="color: #249087; font-size: 30px"
          ></i>
        </div>
        <div>
          <div>赋码物品(设备类)直接放入货架,系统自动感应</div>
          <div>
            未赋码物品(非设备类),请用pda扫描货位条码,手动输入归还的种类,批次,数量
          </div>
        </div>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          height="100%"
          style="width: 100%"
          border
          :header-cell-style="{
            'text-align': 'center',
            color: '#009191',
            'font-size': '18px',
          }"
          @row-click="rowClick"
        >
          <el-table-column type="index" label="序号" width="60" align="center">
          </el-table-column>

          <el-table-column prop="materialName" label="物品类型" align="center">
          </el-table-column>
          <el-table-column prop="specs" label="规格型号" align="center">
          </el-table-column>
          <el-table-column prop="goodsCode" label="物品编号" align="center">
          </el-table-column>
          <!-- <el-table-column prop="" label="货位编号" align="center">
          </el-table-column> -->
          <el-table-column prop="recommendNum" label="待还数量" align="center">
          </el-table-column>
          <el-table-column prop="number" label="归还数量" align="center">
            <!-- <template slot-scope="scope">
              <el-input-number
                style="width: 100%"
                v-if="scope.row.isEdit"
                v-model="scope.row.number"
                :min="0"
                @change="changeCount($event, scope.row)"
              ></el-input-number>
              <div v-else>
                {{ scope.row.number }}
              </div>
            </template> -->
          </el-table-column>
          <el-table-column prop="locationCode" label="归还货位" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
        <!-- <div>
          <el-button plain class="btns2">货位图示</el-button>
        </div> -->

        <el-button
          type="primary"
          class="btns"
          icon="el-icon-check"
          @click="sure"
          >确认归还完毕</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectByCode,
  getCounterShoppingReturn,
  updateCounterShoppingReturn,
} from "@/common/api";
export default {
  name: "SelectDj",
  props: {},
  components: {},
  data() {
    return {
      isSelct: false,
      formInline: {
        recordCode: "",
        teamGroupName: "",
        projectName: "",
      },
      tableData: [],

      timer: null,
      timer2: null,
      item: {}, //当前出库单
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    selectC() {
      this.isSelct = true;
    },
    backCode() {
      this.isSelct = false;
    },
    rowClick(item) {
      this.item = item;
      if (item.isEdit) return;
      this.tableData.forEach((i) => {
        i.isEdit = false;
      });
      item.isEdit = true;
    },
    getData(e) {
      let param = {
        orderCode: "",
      };
      if (e) {
        param.orderCode = e;
      } else {
        //扫码进入的
      }

      this.getList(); //轮询
      this.timer = setInterval(() => {
        this.getList();
      }, 2000);
    },
    getList() {
      getCounterShoppingReturn().then((res) => {
        if (res.success) {
          res.data.forEach((i) => {
            if (i.goodsCode == this.item.goodsCode) {
              i["isEdit"] = true;
            } else {
              i["isEdit"] = false;
            }
            i["number"] = i["number"] ? i["number"] : 0;
          });
          this.tableData = res.data;
        }
      });
    },
    changeCount(e, item) {
      if (this.timer2) {
        clearTimeout(this.timer2);
        this.timer2 = null;
      }
      this.timer2 = setTimeout(() => {
        const { number, goodsCode } = item;
        updateCounterShoppingReturn({ number, goodsCode }).then((res) => {
          if (res.success) {
            // this.$successMsg(res.message);
            item.number = e;
          }
        });
      }, 300);
    },
    closeT() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    sure() {
      this.$emit("goStep", 2);
    },
  },
  destroyed() {
    this.closeT();
  },
};
</script>


<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .content {
    width: 80%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
      /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
        rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .title {
      // background: linear-gradient(to right, #f59a23, #93a65e, #1db4a6);
      // color: white;
      // font-weight: bold;
      // font-size: 20px;
      // padding: 4px;
      // margin-top: 10px;
      // text-align: center;
      // white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      gap: 10px;
      background-color: #f2f2f2;
      padding: 10px;
      border-radius: 10px;
    }
    .table {
      margin-top: 20px;
      flex: 1;
      overflow: hidden;
    }
    .bottom {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.btns {
  color: white;
  background-color: #249087;
}
.btns2 {
  color: #009191;
  border-color: #009191;
}
.btns2:hover {
  color: #009191; /* 悬停文字颜色 */
  border-color: #009191; /* 悬停边框颜色 */
  background-color: transparent; /* 保持背景透明 */
}
</style>
